<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <button @click="person.age++">年龄加一岁</button>
    <button @click="addSex">添加性别属性,默认男</button>
    <button @click="updateSex">修改性别,未知</button>
    <button @click="addAFriendAtTheFirst">朋友列表首位添加一个朋友</button>
    <button @click="updateFisrtFriendName">修改第一个朋友的名字为张三</button>
    <button @click="addHobby">添加一个爱好</button>
    <button @click="updateFistHobbyToDrive">修改第一个爱好为开车</button>
    <br/><br/>
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2 v-if="person.sex">性别:{{person.sex}}</h2>
    <br/><br/>
    <h2>爱好:</h2>
    <ul>
      <li v-for="(h,index) in person.hobby" :key="index">{{h}}</li>
    </ul>
    <br/><br/>
    <h2>朋友</h2>
    <ul>
      <li v-for="(f,i) in person.friends" :key="i">
        {{f.name}}-{{f.age}}
      </li>
    </ul>

  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:'#root',
      data:{
        person:{
          name:'小王',
          age:28,
          friends:[
            {name:'李四',age:19},
            {name:'李五',age:20},
            {name:'李六',age:21}
          ],
          hobby:['唱','跳','rap','篮球']
        }
      },
      methods:{
        addSex(){
          //Vue.set(this.person,'sex','男');
          this.$set(this.person,'sex','男');
        },
        updateSex(){
          this.person.sex = '未知'
        },
        addAFriendAtTheFirst(){
          this.person.friends.unshift({name:'新增的朋友',age:19});
        },
        updateFisrtFriendName(){
          this.person.friends[0].name='张三';
        },
        addHobby(){
          this.person.hobby.unshift("抽烟");
        },
        updateFistHobbyToDrive(){
          //两种都可以
          //this.person.hobby.splice(0,1,'开车');
          this.$set(this.person.hobby,0,'开车');
        }
      }
    });
  </script>
</body>
</html>
